<template>
	<!-- 使用 page-meta 组件配合阻止滚动穿透 ,page-meta一定作为页面的第一个节点-->
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>

	<uni-popup ref="msgPopup" type="center" @change="changePop">
		<my-msg-pop :msg="msg" @delete="deleteMsg" @close="closeMsgPop"></my-msg-pop>
	</uni-popup>

	<view class="container">
		<view class="btn-row">
			<iconfont :name="'clear'" :size="30" :color="'#b7bdc5'" @click="readAll"></iconfont>
			<uni-icons type="trash" size="30" color="#b7bdc5" @click="deleteAll"></uni-icons>
		</view>
		<image src="../../static/empty_img/obj_empty.png" style="width: 100%;margin-top: 30%;" mode="widthFix"
			v-if="msg_list.length==0"></image>
		<view class="msg-list-view" v-else>
			<uni-list>
				<uni-list-item clickable="true" v-for="(item ,index) in _msg_list" :key="item.msgId"
					@click="readMsg(item)">
					<template v-slot:header>
						<view class="slot-box">
							<iconfont :name="item.icon.avatar" :color="item.icon.color" :size="55">
							</iconfont>
						</view>
					</template>
					<template v-slot:body>
						<view class="body">
							<text class="name-text">{{item.title}}</text>
							<text class="pre-text">{{item.content}}</text>
						</view>
					</template>
					<template v-slot:footer>
						<view class="footer">
							<text class="time-text">{{item.receivedTime}}</text>
							<text class="badge-dot" v-if="!item.read"></text>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<view class="load-more" style="padding-bottom: 15px;" v-if="msg_list.length>_num">
				<uni-load-more color="#007AFF" :status="status" />
			</view>
		</view>

		<view class="scroll-btn" v-if="floorStatus" @click="scollToTop">
			<iconfont :name="'scroll_top'" :size="80" :color="'rgb(194, 199, 206,0.3)'"></iconfont>
		</view>
	</view>
</template>

<script>
	// 导入自己封装的 mixin 模块
	import badgeMix from '@/mixins/tabbar-badge.js'
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				show: false,
				msg: {},
				// 是否显示返回顶部的按键
				floorStatus: false,
				// 显示的消息条数
				num: 10,
				_num: 10,
				status: 'more',
			};
		},
		// 将 badgeMix 混入到当前的页面中进行使用
		mixins: [badgeMix],

		computed: {
			...mapState('message', ['msg_list']),
			...mapGetters('message', ['msgIds']),
			// 要显示的消息
			_msg_list() {
				return this.msg_list.slice(0, this.num)
			}
		},

		onLoad() {

		},

		onPullDownRefresh() {
			this.load()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},

		onPageScroll(e) {
			// console.log(e.scrollTop);
			if (e.scrollTop > 100)
				this.floorStatus = true
			else this.floorStatus = false
		},

		onReachBottom() {
			this.loadMore()
		},

		methods: {
			load() {
				uni.showLoading({
					mask: true
				})
				uni.$api.message.getAll()
				setTimeout(() => {
					uni.hideLoading()
				}, 1000)
			},
			// 请求
			readAll() {
				if (this.msg_list.length === 0)
					return
				uni.$api.message.setRead(this.msgIds)
			},
			deleteAll() {
				if (this.msg_list.length === 0)
					return
				uni.$api.message.deleteRead(this.msgIds)
			},
			read() {
				if (!this.msg.read) {
					this.msg.read = true
					uni.$api.message.setRead([this.msg.msgId])
				}
			},
			deleteMsg() {
				uni.$api.message.deleteRead([this.msg.msgId])
			},
			// 事件处理
			readMsg(item) {
				this.msg = item
				this.read()
				this.$refs.msgPopup.open()
			},
			changePop(e) {
				this.show = e.show
			},
			closeMsgPop() {
				this.$refs.msgPopup.close()
			},
			// 回到顶部
			scollToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
			// 加载更多
			loadMore() {
				if (this.status == 'more') {
					this.status = 'loading'
					setTimeout(() => {
						this.num = this.num + 10
						if (this.num < this.msg_list.length)
							this.status = 'more'
						else this.status = 'noMore'
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		margin: 0 25rpx;

		.btn-row {
			margin: 10rpx 0;
			display: flex;
			justify-content: space-between;
		}

		.msg-list-view {
			background-color: #fff;
			overflow: hidden;
			border-radius: 20rpx;

			.uni-list {
				.body {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					flex: 1;
					margin-left: 15px;

					.name-text {
						font-size: 35rpx;
					}

					.pre-text {
						width: 300rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 25rpx;
						color: #959ea8;
					}
				}

				.footer {
					color: #959ea8;
					font-size: 25rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					width: 100rpx;

					.time-text {
						white-space: nowrap;
						overflow: hidden;

					}

					.badge-dot {
						background-color: #ff5a5f;
						width: 10px;
						height: 10px;
						border-radius: 100px;
						padding: 0;
						margin-top: 20rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}

	.scroll-btn {
		position: fixed;
		bottom: 50rpx;
		right: 30rpx;
	}
</style>